<script setup>
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import * as echarts from 'echarts'
import { userMapData } from '../../stores/mapData.js'

const { t } = useI18n()
const store = userMapData()
const chart = ref(null)

const option = ref({
  title: {
    text: t('ageDistribution'),
    left: 'left'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    left: 'center',
    top: 'bottom',
    data: []
  },
  series: [
    {
      name: t('ageDistribution'),
      type: 'pie',
      radius: [20, 140],
      center: ['50%', '50%'],
      roseType: 'radius',
      itemStyle: {
        borderRadius: 5
      },
      data: []
    }
  ]
})

onMounted(() => {
  const myChart = echarts.init(chart.value)
  const pieData = store.getElderlyAge
  option.value.series[0].data = pieData
  option.value.legend.data = pieData.map(item => item.name)
  myChart.setOption(option.value)
})
</script>

<template>
  <div ref="chart" style="width: 100%; height: 300px;"></div>
</template>

<style scoped>
div {
  background: #fff;
  border-radius: 8px;
}
</style>
